<!--
帖子
 -->
<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <!-- //珠海港圈 -->
      <el-tab-pane label="珠海港圈" name="珠海港圈"></el-tab-pane>
      <!-- //互帮互助 -->
      <el-tab-pane label="互帮互助" name="互帮互助"></el-tab-pane>
      <el-tab-pane label="创新建议" name="创新建议"></el-tab-pane>
      <el-tab-pane label="资源共享" name="资源共享"></el-tab-pane>
      <el-tab-pane label="我的回答" name="回答"></el-tab-pane>
    </el-tabs>
    <noMore v-if="editData.length == 0"></noMore>
    <div class="invitationBox" v-for="(item,index) in editData" :key="index" v-else>
      <div
        class="invitationBoxTitle"
        v-if="item.problemData"
        @click="toEdit(item._id)"
      >{{item.problemData.problemname}}</div>
      <div
        class="invitationBoxTitle"
        v-if="item.title&&!item.problemData"
        @click="toEdit(item._id)"
      >{{item.title}}</div>
      <div
        class="invitationBoxTitle"
        v-if="!item.title&&!item.problemData"
        @click="toEdit(item._id)"
      >无标题</div>
      <!-- <div class="invitationBoxSubTitle">{{item.textReplace}}</div> -->
      <div class="invitationBoxBottom">
        <div class="invitationBoxBottomItem" @click="delectDraft(item,index)">删除</div>
        <div class="invitationBoxBottomItem" @click="toEdit(item._id)">编辑</div>
        <!-- <div class="invitationBoxBottomItem">302 赞</div> -->
        <div
          class="invitationBoxBottomtype"
        >{{new Date(Date.parse(item.editTime)).toLocaleString()}}</div>
      </div>
      <el-divider></el-divider>
    </div>

    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-size="limitSize"
      layout="prev, pager, next, jumper"
      :total="articleSize"
    ></el-pagination>
  </div>
</template>

<script>
import { get_draft, delete_draft } from "@/api/draft";
import { post_delectImg, post_enclosure } from "@/api/deleteTheInterface";
import noMore from "@/components/noMore";
import { rich_text_img, rich_text_img_prefix } from "@/utils/global";
export default {
  name: "myInvitation",
  components: {
    noMore
  },
  data() {
    return {
      currentPage4: 4,
      activeName: "珠海港圈",
      editData: [],
      skipSize: 0, //开始位置
      articleSize: 0, //总文章
      limitSize: 10,
      api: {
        imgManage: rich_text_img,
        rich_text_img_prefix
      }
    };
  },
  watch: {
    async $route(newRouter) {
      //监听路由是否变化
      if (newRouter.path == "/personalCenter") {
        this.getArticleData();
      }
    }
  },
  created() {
    this.getArticleData();
  },
  methods: {
    async getArticleData() {
      let editData = await get_draft({
        query: {
          userId: this.$store.getters.userInfo._id,
          radio1: this.activeName
        },
        skip: this.skipSize,
        limit: this.limitSize,
        count: true
      });
      console.log(
        "editData",
        editData,
        this.activeName,
        this.$store.getters.userInfo._id
      );
      this.editData = editData.data;
      this.articleSize = editData.countnum;
    },
    handleCurrentChange(val) {
      this.skipSize = (val - 1) * this.limitSize;
      this.getArticleData();
    },
    tabClick() {
      this.skipSize = 0;
      this.getArticleData();
    },
    toEdit(edit_id) {
      if (this.activeName == "珠海港圈" || this.activeName == "创新建议") {
        this.$router.push({
          path: "/editor",
          query: {
            _id: edit_id
          }
        });
      } else if (this.activeName == "互帮互助") {
        this.$router.push({
          path: "/editQuestion",
          query: {
            _id: edit_id
          }
        });
      } else if (this.activeName == "资源共享") {
        this.$router.push({
          path: "/editResources",
          query: {
            _id: edit_id
          }
        });
      } else if (this.activeName == "回答") {
        this.$router.push({
          path: "/editAnswer",
          query: {
            _id: edit_id
          }
        });
      }
    },
    getRemovImgId(html) {
      let dom = document.createElement("DIV");
      dom.innerHTML = html;
      const imgDom = dom.getElementsByTagName("img");
      // const url = window.location.host;
      const arr = [];

      for (let i = 0; i < imgDom.length; i++) {
        let name = imgDom[i].src.replace(this.api.rich_text_img_prefix, "");
        arr.push(name);
      }
      return arr;
    },
    delectDraft(item, index) {
      this.$confirm("此操作将永久删除该草稿, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let htmlId = this.getRemovImgId(item.html);
          let name = [];
          if (item.titleImageUrl) {
            let deleItem = item.titleImageUrl.replace(
              this.api.rich_text_img_prefix,
              ""
            );
            name.push(deleItem);
          }
          let delImg = item.deleImgId.concat(
            item.deletTitleImageUrl,
            htmlId,
            name
          );

          if (item.fileList.length > 0) {
            item.fileList.forEach(el => {
              item.fileDelectArr.push(el.filesName);
            });
          }
          console.log("```````````````````删除图片`````````````````````");
          console.log(
            "题图：",
            "原有的：",
            item.titleImageUrl,
            "删除：",
            item.deletTitleImageUrl
          );
          console.log(
            "富文本图片",
            "htmlId的：",
            htmlId,
            "已被记录删除：",
            item.deleImgId
          );
          console.log("总删除图片", "htmlId的：", delImg);
          console.log("```````````````````删除附件`````````````````````");
          console.log("附件：", "原本", item.fileList);
          console.log("总删除附件：", item.fileDelectArr);

          if (delImg.length != 0) {
            await post_delectImg({
              deleImgArr: delImg
            });
          }
          if (item.fileDelectArr && item.fileDelectArr.length != 0) {
            await post_enclosure({
              deleArr: item.fileDelectArr
            });
          }
          await delete_draft({
            query: {
              _id: item._id
            }
          });
          this.editData.splice(index, 1);
          this.$message({
            showClose: true,
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.invitationBox {
  .invitationBoxTitle {
    font-size: 23px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    width: 850px;
    overflow: hidden;
    text-overflow: ellipsis; //超出部分以省略号显示
    white-space: nowrap;
    cursor: pointer;
    &:hover {
      color: #1d2f70;
      text-decoration: underline;
    }
  }
  .invitationBoxSubTitle {
    color: #6c6c6c;
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 可以显示的行数，超出部分用...表示*/
    -webkit-box-orient: vertical;
  }
  .invitationBoxBottom {
    display: flex;
    position: relative;
    margin-top: 14px;
    color: #b3b2b2;
    .invitationBoxBottomItem {
      margin-right: 18px;
      font-size: 14px;
      color: dodgerblue;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
    .invitationBoxBottomtype {
      right: 20px;
      position: absolute;
    }
  }
}
</style>
